<template>
  <q-card-section class="row justify-center">
    <q-form
      class="col-12 col-lg-11 col-xl-9"
      @submit.prevent.stop="editItem"
      ref="editItem"
    >
      <div class="row q-col-gutter-md">
        <div class="col col-md-6">
          <q-select
            outlined
            dense
            v-model="Select.model"
            :options="Select.options"
            label="所属分类"
            clear-icon="mdi-close"
            clearable
            options-selected-class="text-primary"
            name="CategoryID"
          />
        </div>
        <div class="col col-md-6">
          <q-toggle
            v-model="Status"
            name="status"
            label="是否审核"
            left-label
            class="q-ml-sm"
          />
          <div class="q-field__bottom q-field__messages col">取消审核的内容，不会删除，只是不在前台显示</div>
        </div>
      </div>
      <div class="row">
        <div class="col col-12">
          <q-input
            outlined
            dense
            v-model="Question"
            label="问题"
            name="Question"
            :rules="[val => !!val || '请填写问题']"
            class="q-mt-md"
          />
        </div>
      </div>
      <div class="row">
        <div class="col col-12">
          <q-input
            outlined
            dense
            autogrow
            type="textarea"
            v-model="Answer"
            label="回答"
            name="Answer"
          />
        </div>
      </div>
      <q-separator class="q-my-md" />
      <div class="row q-col-gutter-md">
        <q-space />
        <div class="col col-md-2">
          <q-btn
            label="提交编辑"
            type="submit"
            color="primary"
            unelevated
            class="full-width"
          />
        </div>
        <div class="col col-md-2">
          <q-btn
            label="返回列表"
            type="button"
            color="info"
            unelevated
            class="full-width"
            @click="returnList"
          />
        </div>
      </div>
    </q-form>
  </q-card-section>
</template>

<script>
import { mapMutations } from 'vuex'

// 定义获取二级分类的参数
const _mCode = {
  mCode: 'wd'
}

export default {
  name: 'PageEditQA',
  components: {},
  props: {},
  data () {
    return {
      // ---------- 下拉框
      Select: {
        model: null,
        options: [],
        columnName: '',
      },
      Question: '',
      Answer: '',
      Status: true,
    }
  },
  methods: {
    // 获取传递过来的ID参数
    getParamsID() {
      this.ID = this.$route.params.ID
      if ( this.ID === ':ID') {
        this.$utils.notify('参数错误', 'red-8')
        this.$utils.returnPrevPage()
      }
      // console.log(this.ID)
    },
    // 获取所属分类
    getCategory() {
      this.$api.MColumnOptionParams('GetMColumnList', 'get', _mCode).then (result => {
        // console.log(result)
        this.Select.options = result
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },
    // 根据ID获取数据
    getItem(url) {
      this.$api.QAsParams(url, 'get').then (result => {
        // console.log(result)
        this.Select.model = new Object()
        this.Select.model.value = result.CategoryID
        const _CategoryID = result.CategoryID
        this.Select.options.forEach((item, index) => {
          if ( item.value === _CategoryID ) {
            this.Select.model.label = item.label
          }
        })
        this.Question = result.Question
        this.Answer = result.Answer
        this.Status = result.Status
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })

    },
    // 修改
    editItem(evt) {
      if ( this.Select.model === null ) {
        this.$utils.notify('请选择问答分类', 'red-8')
      } else {
        const _editItemResult = this.$utils.formatFormData(evt)
        // console.log(_editItemResult)
        this.$api.QAsData(this.ID, 'put', _editItemResult).then( result => {
          // console.log(result)
          if ( result === 'success') {
            //  重新请求数据列表
            this.getItem(this.ID)
            this.$utils.notify('更新成功！', 'positive')
          } else if ( result === 'error' ) {
            this.$utils.notify('数据库操作错误，请联系管理员', 'red-8')
          } else {
            this.$utils.notify(result, 'red-8')
          }
        }).catch( err => {
          switch (err.response.status) {
            case 401:
              this.unauthorized()
              break
          }
          console.log(err)
        })
      }
    },
    // btn-返回列表
    returnList() {
      this.$router.push('/QAs/QAs');
    },
    // session过期操作
    ...mapMutations(['changeLogin']),
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    }
  },
  mounted() {
    this.getCategory()
    this.getItem(this.ID)
  },
  created() {
    this.getParamsID()
  }
}
</script>
<style scoped>
</style>